<template>
	<view class="seller_detail">
		<view class="detail_box">
			<view class="detail_bg">
				<!-- 背景图 -->
				<image :src="seller.cover || '/static/image/card1.png'" v-if="seller.cover"></image>
				<view class="bg" v-if="!seller.cover"></view>
			</view>
			<view class="detail_content">
				<!-- 上部分 -->
				<view class="top">
					<!-- 商家头像 -->
					<view class="detail">
						<image :src="seller.cover || '/static/image/card1.png'" mode="" ></image>
						<view class="detail_text">
							<view class="seller_name">{{seller.name || ''}}</view>
							<view class="work_date">
								<image src="/static/image/time_icon.png" mode=""></image>
								<view>{{seller.worktime || ' 暂无营业时间'}}</view>
							</view>

							<view class="exchange">
								<view class="de">代金卷</view>
								<view class="seller_exchange">已兑{{seller.sale_num}}件</view>
							</view>
						</view>
					</view>
					<u-gap height="2" bg-color="#bbb"></u-gap>
					<view class="discription">
						{{seller.description || '暂无介绍'}}
					</view>
				</view>

				<!-- 中间白色部分 -->
				<view class="bottom">
					<view class="address x-f">
						<view class="address_text">
							<image :src="location_img" mode=""></image>
							{{seller.address || '暂无地址'}}
						</view>
						<view class="concat" @click.stop="showPhone">
							<image src="/static/image/telr_icon.png" mode="" class="tel"></image>
							<view class="tel_text" >联系商家</view>
						</view>

					</view>
				</view>
			</view>
			<view class="mian"  :class="{'chageTop1': seller.coupons.length > 0}">
				<!-- 代金券 -->
				<view class="coupon" v-if="seller.coupons.length > 0">
					<view class="title">代金券</view>
					<view class="couponCard pr" v-for="(item,index) in seller.coupons" :key="index">
						<image class="coupon-bg" :src="coupon_bg"></image>
						<view class="text-box pa">
							<view class="coupon-title">{{item.name}}</view>
							<view class="coupon-score x-f">
								<view class="score">{{item.points}}积分</view>
								<view class="in-score">{{item.points}}00积分</view>
							</view>
						</view>
						<view class="bottom-box pa">
							<view class="bottom-box-bottom tc" v-if="!item.type" :class="{'usered': item.type}" @tap.stop="exchageCoupons(item)">兑换</view>
							<view class="bottom-box-bottom tc" v-if="item.type">已兑换</view>
							<view class="num tc">已兑{{item.exchange_num}}人</view>
						</view>
					</view>
				</view>
				<!-- 拼团 -->
				<view class="group" v-for="(item,index) in seller.coupons" :key="index"
					v-if="seller.coupons.length < 0">
					<view class="title">正在拼团</view>
					<view class="x-f">
						<image class="goods-logo" src="/static/image/hairdrier.png"></image>
						<view class="text-box">
							<view class="goods-title">智能无线头戴耳机超级信号强烈支持 蓝牙连接</view>
							<view class="goods-num tc">已兑234件</view>
							<view class="go-score x-bc">
								<view class="score">5080积分</view>
								<view class="go">去开团</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 猜你喜欢 -->
			<view class="love pa" :class="{'chageTop': seller.coupons.length > 0}">
			<empty :null_data="null_data" v-if="!gift.length && comments.length"></empty>
			<empty :null_data="null_info" v-if="!gift.length && !comments.length"></empty>
				<view class="live">
					<view class="title" v-if="gift.length > 0">商品列表</view>
					<view class="title" v-if="gift.length < 0">猜你喜欢</view>
					<goods-list :goods_data="gift" @getId="getId"></goods-list>
					<!-- 点击加载更多 -->
					<view class="" @click="getMore" v-if="seller.coupons.length > 0">
						<tap-more :isLoad="isLoad" :isNone="isNone" :isName="isName"></tap-more>
					</view>
				</view>
                <!-- 评价 -->
				<view class="comment" >
					<view class="comment-title" :class="{'chageComment': gift.length < 0 || seller.coupons.length < 0 }" v-if="comments.length">评价</view>
					<view class="comment-title" :class="{'chageComment': gift.length < 0 || seller.coupons.length < 0 }" v-if="!comments.length">评价</view>
					<view class="nocomment x-c" v-if="!comments.length">暂无评价信息</view>
					<view class="comment-main" v-for="(comment, index) in comments" :key="index">
						<view class="class-box pr">
							<image class="user-img" :src="comment.pic_url"></image>
							<view class="name-date">
								<view class="name">{{comment.realname || '匿名用户'}}</view>
								<view class="date">{{comment.create_time || '暂无时间'}}</view>
							</view>
						</view>
						<!-- 评分星星 getMoreComment-->
						<view class="comment-active x-f">
							<u-rate :count="5" v-model="comment.level" :size="20" activeColor="#FFE145"
								:disabled="true"></u-rate>
						</view>
						<view class="text">{{comment.text || ''}}</view>
					</view>
					<view class="" @click="getMoreComment" v-if="comments.length > 5">
						<tap-more :isLoad="isLoadc" :isNone="isNonec" :isName="isNamec"></tap-more>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-tab pf x-ac">
			<view class="tab-list pr y-bc" v-for="(tab, index) in tabs" :key="index" @tap.stop="jump(tab.url)">
				<image :src="tab.img"></image>
				<view class="bottom-title">{{tab.title}}</view>
			</view>
		</view>
		<!-- 拨打电话 mobile-->
		<phone ref="phonePopup" :mobile="mobile"></phone>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import mixins from '@/common/mixins.js';
	export default {
		mixins: [mixins],
		data() {
			return {
				null_data: { 							// 空状态
				 null_img: this.imgUrl + 'cart.png',
				 text: '暂无商品~'
				},
				null_info: { 							// 空状态
				 null_img: this.imgUrl + 'cart.png',
				 text: '该商家很懒，空空如也~~~'
				},
				isName: false,
				isLoad: false,
				isNone:false,
				isNamec: false,
				isLoadc: false,
				isNonec:false,
				show: true,
				showTel: false, 						// 显示电话弹窗
				count: 5,								// 评价数量
				value: 4,								// 评价数量
				tabs: [{								// 底部菜单
					img: this.imgUrl + "map-logo.png",
					title: "导航进店",
					url: '/pages/seller/navigation/index',

				}, {
					img: this.imgUrl + "service.png",
					title: "商家评价",
					url: '/pages/seller/evaluate/index',

				}, {
					img: this.imgUrl + "comments.png",
					title: "意见与反馈",
					url: '/pages/user/after_sale/index',

				}],
				comment_grey: this.imgUrl + 'comment.png', 			// 灰色星星图片
				comment_active: this.imgUrl + 'comment-active.png', // 黄色星星图片
				coupon_bg: this.imgUrl + 'coupon-bg.png',			// 优惠券背景
				location_img: this.imgUrl + 'location_icon.png', 	// 定位图标
				seller: [], 										// 商家信息
				comments: [], 										// 评价
				gift: [], 											// 商品信息
				mobile: '',											// 手机号
				count: 1,										    // 分页
				obj: {
					shop_id: '',
					page: 1,
					pagesize: 6
				}
			}
		},
		computed: {
			...mapState({
				collectList: state => state.user.collect,			 // 个人收藏信息
				shopId: state => state.sellers.shopId, 				 // 商家id
			})
		},
		mounted() {
			this.getInfo();
			this.getcomment();
		},
		methods: {
			// 评价
			getcomment() {
				let num = Number(this.shopId);
				this.obj.shop_id = num;
				this.$api('pageShopComment',this.obj).then(res=> {
					this.comments = res.data.data;
					this.comments.forEach((item, index) => {
					   item.create_time = this.time_data(item.create_time, 'b_date');
					})
				})
			},
			// 获取商家信息
			getInfo() {
				let num = Number(this.shopId);
				this.obj.shop_id = num;
				this.$api('shopinfo', this.obj).then(res => {
					let arr = res
					this.seller = arr.data.shop
					this.$store.dispatch('sellers/get_sellerInfo', this.seller)
					this.mobile = this.seller.mobile
					this.gift.push(...arr.data.gift.data)
					this.seller.coupons = arr.data.coupons
					// 给优惠券追加一个状态
					for (let i in this.seller.coupons) {
						this.seller.coupons[i].type = false
					}
                    if (res.data.gift.data.length < 6) {
                        this.isName = true;
                        this.isNone = true;
                    }
				})
			},
			// 兑换优惠券
			exchageCoupons(val) {
				let obj = {
					shop_id : this.obj.shop_id,
					coupon_key: val.key,
				}
				val.type = true
				this.$api('shopexchangeCoupon',obj).then(res => {	
					this.$tools.toast('优惠券兑换成功')
				})
			},
			// 加载更多
			getMoreComment() {
				if(this.isNamec) return;
				this.isNonec =true;
				this.isLoadc = true;
				setTimeout(()=> {
					let num = Number(this.shopId);
					this.obj.shop_id = num;
					this.obj.page++
					this.$api('pageShopComment',this.obj).then( res => {
						this.comments = [...this.comments,...res.data.data];
						this.comments.forEach((item, index) => {
							if(typeof(item.create_time) == 'number') {
								item.create_time = this.time_data(item.create_time, 'b_date');
							}
						})
						if(!res.data.data.length) {
							this.isLoadc = false;
							this.isNamec =true
						} else {
							this.isLoadc = false;
							this.isNonec = false;
						}
					})
				},1000)
			},
			// 加载更多
			getMore() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.obj.page++
					this.$api('shopinfo',this.obj).then( res => {
						this.gift = res.data.gift.data
						if(!res.data.gift.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
			// 提交商品id
			getId(e) {
				this.$store.dispatch('goods/get_detail', e)
			},
			// 路由跳转
			jump(path) {
				let id = this.obj.shop_id
				// 把请求参数存vuex 或者在页面中构造好。传递出去。
				this.$Router.push({
					path: path,
					query: {
						'id': id
					}
				})
			},
			// 电话组件显示
			showPhone() {
				this.$refs.phonePopup._data.showTel = true
			},
			// 隐藏
			closePop() {
				this.showTel = false
			},
			// 拨打电话
			callPhone() {
				this.$tools.callphone(this.seller.mobile)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './detail.scss';
	.chageTop {
		transform: translateY(0rpx);
	}
	.chageTop1 {
		margin-top: -350rpx;
	}
	.chageComment {
		margin-top: -350rpx;
	}
</style>
